<template>
    <div style="background-color: rgb(241, 241, 241);padding-left:5px;min-height: 100vh;box-sizing: border-box;">
        <van-nav-bar title="购物车" left-text="返回" left-arrow fixed @click="$router.back">
           
        </van-nav-bar>
        <div style="height: 50px;"></div>

        <!-- 判断购物车是否为空 -->
        <div v-if="cartStore.goodsData && isLogin"  >
          
            <van-swipe-cell v-for="item in cartStore.goodsData" style="position: relative;" class="del">

                <van-checkbox v-model="item.checked" 
                    style="width: 20px;position: absolute;top:50px;" />

                <van-card :num="item.count" :price=" (item.goods_info?.price*item.count).toFixed(2)" :desc="item.goods_info?.detail_info"
                    :title="item.goods_info?.name" :key="item.id" style="margin-left: 25px;border-radius: 10px 0 0 10px;"
                    :thumb="item.goods_info?.pic_url">
                    <template #tags>
                        <van-tag plain type="primary">{{ item.goods_info?.tags }}</van-tag>

                    </template>
                    <template #footer>
                        <van-stepper @change="changeGoodsSum(item)" v-model="item.count" />
                    </template>
                </van-card>
                <!-- 删除按钮 -->
                <template #right >
                   
                         <van-button square text="删除" type="danger" class="delete-button" @click="deleteGoods(item.id)" />
                </template>
            </van-swipe-cell>
               
        </div>
        <div v-else-if="!cartStore.goodsData && isLogin" style="display: flex;justify-content:center;flex-direction: column;align-items: center;height: 60vh;">
            <van-icon name="smile-o" size="50px" style="margin-bottom: 20px;"></van-icon>
            <p style="margin-bottom: 20px;">购物车空空如也</p>
            <van-button style="background-color: #1BAEAE;color: #fff; width: 180px;"
                @click="$router.push('/home')">去首页</van-button>
        </div>

        <!-- 提交订单 -->
        <van-submit-bar :price="totalPrice*100"  button-text="提交订单" @submit="onSubmit" style="bottom: 50px;"  v-if="cartStore.goodsData?.length > 0">
            <van-checkbox v-model="isAllChecked">全选</van-checkbox>
        </van-submit-bar>


        <!-- 判断是否处于登录状态 -->
        <van-empty description="未登录" v-if="!getToken()">
            <van-button style="background-color: #1BAEAE;color: #fff; width: 180px;" @click="$router.push('/login')"> 登
                录</van-button>
        </van-empty>
        <div style="height: 110px;"></div>
    </div>
</template>

<script setup>
import { getToken } from '../../utils/token'
import { ref ,computed} from 'vue'
import useCartStore from '../../store/useCartStore'
import { editCart,delCart,getCartList } from '../../api';
import {useRouter} from 'vue-router'

let router  = useRouter()
let cartStore = useCartStore()

let isLogin = ref(true)
let token = getToken()
if(token){
    isLogin.value=true
}else{
    isLogin.value=false
}
// getCartList({page:1,limit:10}).then(res=>{
//     if(res.code==1){
//         console.log(res)
//     }
// })

//删除购物车中的商品
const deleteGoods = (id) => { 
    delCart({ids:[id]}).then(res=>{
        if(res.code==1){
          
            cartStore.getCartInfo()
        }
    })
};

//改变商品数量 更新购物车
function changeGoodsSum(item) {
   //console.log(item)
    editCart({goods_id:item.goods_id,count:item.count,id:item.id})
}
//是否全选
let isAllChecked=computed({
    get(){
      return  cartStore.goodsData?.every(item=>item.checked)
    },
    set(val){
        cartStore.goodsData.forEach(item=>{
            item.checked=val
        })
    }
})
//计算总价
let totalPrice = computed(()=>{
   return cartStore.goodsData?.filter(item=>item.checked).reduce((pre,cur)=>pre+cur.goods_info?.price*cur.count,0)
})

//提交订单
function onSubmit(){
  let isChecked=  cartStore.goodsData.find(item=>item.checked)
  if(!isChecked) return
    localStorage.removeItem('curGoodsId')
    let goods= []
 cartStore.goodsData.forEach(item=>{
    if(item.checked){
       goods.push({
               count:item.count,
               goods_id:item.goods_id,
               cartId:item.id,
               goodsInfo:item.goods_info
        })
    }
   })
 
 if(cartStore.goodsData.length>0){
    router.push({
        path:'address',
        query:{
            orderInfo:btoa(encodeURI(
                JSON.stringify({goods,price:totalPrice.value})
            ))
            
        }
    })
 }
}
</script>

<style scoped>
.goods-card {
    margin: 0;
    background-color: white;
}

.delete-button {
    height: 100%;
}
:deep() .van-nav-bar .van-icon{
    color: #1BAEAE;
    font-weight: bolder;
} :deep() .van-nav-bar .van-nav-bar__text{
    color: #1BAEAE;
    font-weight: bolder;
    }

    :deep() .van-checkbox__icon--checked .van-icon{
        background-color: #1BAEAE;
        border-color: #1BAEAE;
    }
    :deep() .van-tag--primary.van-tag--plain {
    color: #1BAEAE;
}
:deep() .van-submit-bar__price{
    color: #1BAEAE;
}
:deep() .van-button--danger {
    color: var(--van-button-primary-color);
    background: linear-gradient(90deg,#8beded,#159f9f);
   
}
:deep() .van-tabs__line{
    background: #1baeae;
}
:deep() .del .van-button--danger {
   
    background: rgb(255, 65, 65)
}
    

</style>